<template>
    <section class="weather-wrapper" :style="{ backgroundImage: 'url(' + backgroundStatic + ')' }">
        <div class="weather-widget" v-if="liveWeather && forecastWeather.length">
            <!-- 视频背景 -->
            <video v-if="backgroundUrl" autoplay muted loop playsinline class="video-background">
                <source :src="backgroundUrl" type="video/mp4" />
            </video>
            <div class="weather-content">
                <h2 class="title">🌤 {{ getCityName() }}天气预报</h2>
                
                <!-- 当前天气信息 -->
                <div class="weather-today">
                    <div class="icon-container" v-html="getWeatherSvg(liveWeather.weather)" />
                    <div class="today-info">
                        <p class="temp">{{ liveWeather.temperature }}℃</p>
                        <p class="desc">{{ liveWeather.weather }}</p>
                        <p>🌬 {{ liveWeather.winddirection }}风 {{ liveWeather.windpower }}级</p>
                        <p class="time">更新时间：{{ liveWeather.reporttime }}</p>
                    </div>
                </div>

                <!-- 穿衣建议卡片 -->
                <div class="clothing-advice" v-if="clothingAdvice.category">
                    <h3 class="advice-title">
                        👕 {{ clothingAdvice.category }}穿衣建议
                    </h3>
                    
                    <div class="advice-content">
                        <div class="advice-row">
                            <div class="advice-item tops">
                                <h4>👕 上装</h4>
                                <div class="tags">
                                    <span v-for="item in clothingAdvice.tops.slice(0, 3)" :key="item" class="tag">
                                        {{ item }}
                                    </span>
                                </div>
                            </div>
                            <div class="advice-item bottoms">
                                <h4>👖 下装</h4>
                                <div class="tags">
                                    <span v-for="item in clothingAdvice.bottoms.slice(0, 3)" :key="item" class="tag">
                                        {{ item }}
                                    </span>
                                </div>
                            </div>
                        </div>
                        
                        <div class="advice-row">
                            <div class="advice-item shoes">
                                <h4>👟 鞋履</h4>
                                <div class="tags">
                                    <span v-for="item in clothingAdvice.shoes.slice(0, 3)" :key="item" class="tag">
                                        {{ item }}
                                    </span>
                                </div>
                            </div>
                            <div class="advice-item accessories">
                                <h4>🎒 配饰</h4>
                                <div class="tags">
                                    <span v-for="item in clothingAdvice.accessories.slice(0, 3)" :key="item" class="tag">
                                        {{ item }}
                                    </span>
                                </div>
                            </div>
                        </div>
                        
                        <div class="advice-tips">
                            <h4>💡 贴心提示</h4>
                            <p>{{ clothingAdvice.tips }}</p>
                        </div>
                    </div>
                </div>

                <!-- 天气预报 -->
                <div class="weather-forecast">
                    <h3 class="forecast-title">📅 未来三天预报</h3>
                    <div class="forecast-cards">
                        <div class="day" v-for="(day, index) in forecastWeather.slice(0, 3)" :key="index">
                            <p class="date">{{ formatDate(day.date) }}</p>
                            <div class="icon-container" v-html="getWeatherSvg(day.dayweather)" />
                            <p class="weather">{{ day.dayweather }}</p>
                            <p class="temp-range">{{ day.daytemp }}℃ / {{ day.nighttemp }}℃</p>
                            <p class="wind-info">🌬 {{ day.daywind }} {{ day.daypower }}级</p>
                            <p class="humidity">💧 湿度：{{ liveWeather.humidity }}%</p>
                            <!-- 每日穿衣提示 -->
                            <div class="daily-tip">
                                <span class="tip-tag">{{ getDailyTip(day.daytemp, day.dayweather) }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</template>

<script>
import axios from 'axios';
import rainVideo from '@/assets/weather/rain.mp4';
import sunVideo from '@/assets/weather/sun.mp4';
import snowVideo from '@/assets/weather/snow.mp4';
import overcastVideo from '@/assets/weather/overcast.mp4';
import sunnyIcon from '@/assets/weather-icons/sunny.png';
import cloudIcon from '@/assets/weather-icons/cloud.png';
import rainIcon from '@/assets/weather-icons/rain.png';

export default {
    name: 'WeatherForecast',
    props: {
        city: {
            type: String,
            default: '420100'
        }
    },
    data() {
        return {
            selectedCity: this.city,
            liveWeather: null,
            forecastWeather: [],
            backgroundUrl: '',
            backgroundStatic: '',
            isNight: false,
            clothingAdvice: {} // 新增穿衣建议数据
        };
    },
    watch: {
        city(newVal) {
            if (newVal && newVal !== this.selectedCity) {
                this.selectedCity = newVal;
                this.fetchWeather();
            }
        },
        // 监听天气数据变化，更新穿衣建议
        liveWeather: {
            handler(newVal) {
                if (newVal) {
                    this.updateClothingAdvice();
                }
            },
            deep: true
        }
    },
    methods: {
        async fetchWeather() {
            const key = '3d85c37fc3bcebf990e45f9ed1d224a9';
            const city = this.selectedCity;
            try {
                const liveRes = await axios.get(
                    `https://restapi.amap.com/v3/weather/weatherInfo?city=${city}&key=${key}&extensions=base`
                );
                this.liveWeather = liveRes.data.lives[0];
                this.setBackground(this.liveWeather.weather);

                const forecastRes = await axios.get(
                    `https://restapi.amap.com/v3/weather/weatherInfo?city=${city}&key=${key}&extensions=all`
                );
                this.forecastWeather = forecastRes.data.forecasts[0].casts;
            } catch (error) {
                console.error('获取天气失败', error);
            }
        },
        setBackground(weather) {
            if (weather.includes('雨')) {
                this.backgroundUrl = rainVideo;
            } else if (weather.includes('晴')) {
                this.backgroundUrl = sunVideo;
            } else if (weather.includes('雪')) {
                this.backgroundUrl = snowVideo;
            } else if (weather.includes('阴')) {
                this.backgroundUrl = overcastVideo;
            } else if (weather.includes('云')) {
                this.backgroundUrl = sunVideo;
            }
        },
        formatDate(dateStr) {
            const date = new Date(dateStr);
            return `${date.getMonth() + 1}月${date.getDate()}日`;
        },
        getCityName() {
            return this.liveWeather?.city || '未知城市';
        },
        getWeatherSvg(weather) {
            if (weather.includes('雨')) {
                return `<img src="${rainIcon}" alt="雨" style="width:48px;height:48px;" />`;
            }
            if (weather.includes('云')) {
                return `<img src="${cloudIcon}" alt="云" style="width:48px;height:48px;" />`;
            }
            if (weather.includes('晴')) {
                return `<img src="${sunnyIcon}" alt="晴" style="width:48px;height:48px;" />`;
            }
            if (weather.includes('雪')) {
                return `<svg width="48" height="48" viewBox="0 0 64 64"><circle cx="32" cy="20" r="12" fill="#90CAF9"/><g stroke="#90CAF9" stroke-width="4"><line x1="22" y1="40" x2="22" y2="48"/><line x1="32" y1="40" x2="32" y2="50"/><line x1="42" y1="40" x2="42" y2="48"/></g></svg>`;
            }
            return `<svg width="48" height="48" viewBox="0 0 64 64"><circle cx="32" cy="32" r="14" fill="#B0BEC5"/></svg>`;
        },
        
        // 新增：根据温度获取基础穿衣建议
        getClothingByTemperature(temp) {
            const temperature = parseInt(temp);
            if (temperature >= 30) {
                return {
                    category: '炎热',
                    tops: ['短袖T恤', '背心', '薄衬衫'],
                    bottoms: ['短裤', '薄长裤', '短裙'],
                    shoes: ['凉鞋', '帆布鞋', '透气鞋'],
                    accessories: ['遮阳帽', '太阳镜', '防晒霜'],
                    tips: '选择透气性好的面料，注意防晒'
                };
            } else if (temperature >= 25) {
                return {
                    category: '温暖',
                    tops: ['短袖衬衫', '薄针织衫', '连衣裙'],
                    bottoms: ['休闲裤', '牛仔裤', '中长裙'],
                    shoes: ['小白鞋', '乐福鞋', '平底鞋'],
                    accessories: ['薄外套', '棒球帽', '单肩包'],
                    tips: '可准备一件薄外套应对温差'
                };
            } else if (temperature >= 20) {
                return {
                    category: '舒适',
                    tops: ['长袖衬衫', '薄毛衣', '开衫'],
                    bottoms: ['牛仔裤', '休闲裤', '长裙'],
                    shoes: ['休闲鞋', '小皮鞋', '帆布鞋'],
                    accessories: ['轻便外套', '围巾', '手提包'],
                    tips: '早晚温差较大，建议分层穿搭'
                };
            } else if (temperature >= 15) {
                return {
                    category: '微凉',
                    tops: ['毛衣', '卫衣', '长袖+外套'],
                    bottoms: ['长裤', '厚牛仔裤', '打底裤'],
                    shoes: ['靴子', '运动鞋', '皮鞋'],
                    accessories: ['针织帽', '围巾', '手套'],
                    tips: '注意保暖，选择有厚度的面料'
                };
            } else if (temperature >= 10) {
                return {
                    category: '寒冷',
                    tops: ['厚毛衣', '羽绒服', '大衣'],
                    bottoms: ['厚裤子', '保暖裤', '毛呢裙'],
                    shoes: ['保暖靴', '厚底鞋', '雪地靴'],
                    accessories: ['毛线帽', '厚围巾', '保暖手套'],
                    tips: '重点保暖，建议多层穿搭'
                };
            } else {
                return {
                    category: '严寒',
                    tops: ['厚羽绒服', '棉大衣', '保暖内衣'],
                    bottoms: ['加绒裤', '厚棉裤', '保暖裙'],
                    shoes: ['雪地靴', '保暖靴', '防滑鞋'],
                    accessories: ['毛线帽', '厚围巾', '保暖手套', '暖宝宝'],
                    tips: '全面保暖，注意防风防寒'
                };
            }
        },
        
        // 新增：根据天气调整穿衣建议
        adjustClothingByWeather(baseClothing, weather, windpower, humidity) {
            let adjusted = JSON.parse(JSON.stringify(baseClothing));
            
            if (weather.includes('雨')) {
                adjusted.accessories.push('雨伞', '防水外套');
                adjusted.tips += '，雨天出行注意防水';
            }
            
            if (parseInt(windpower) >= 4) {
                adjusted.accessories.push('防风外套');
                adjusted.tips += '，风力较大注意防风';
            }
            
            if (parseInt(humidity) >= 80) {
                adjusted.tips += '，湿度较高选择透气面料';
            }
            
            return adjusted;
        },
        
        // 新增：更新穿衣建议
        updateClothingAdvice() {
            if (!this.liveWeather) return;
            
            const baseAdvice = this.getClothingByTemperature(this.liveWeather.temperature);
            this.clothingAdvice = this.adjustClothingByWeather(
                baseAdvice,
                this.liveWeather.weather,
                this.liveWeather.windpower,
                this.liveWeather.humidity
            );
        },
        
        // 新增：获取每日穿衣提示
        getDailyTip(temp, weather) {
            const temperature = parseInt(temp);
            if (weather.includes('雨')) {
                return '备雨具';
            } else if (temperature >= 30) {
                return '防晒为主';
            } else if (temperature >= 25) {
                return '轻便舒适';
            } else if (temperature >= 20) {
                return '适中穿搭';
            } else if (temperature >= 15) {
                return '注意保暖';
            } else {
                return '重点防寒';
            }
        }
    },
    mounted() {
        this.selectedCity = this.city;
        this.fetchWeather();
    }
};
</script>

<style scoped>
.weather-wrapper {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 50vh;
    padding: -10px 0px;
    transition: background-color 0.3s;
}

.weather-wrapper.night {
    background-color: #0d1b2a;
    color: #fff;
}

.weather-widget {
    position: relative;
    background: linear-gradient(to right, #74ebd5, #acb6e5);
    color: #333;
    padding: 24px;
    border-radius: 16px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    font-family: "Segoe UI", sans-serif;
}

.video-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    border-radius: 16px;
}

.weather-content {
    position: relative;
    z-index: 1;
}

.title {
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 16px;
    color: #fff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.weather-today {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.9);
    padding: 16px;
    border-radius: 12px;
    margin-bottom: 20px;
    gap: 16px;
}

.today-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.today-info .temp {
    font-size: 32px;
    font-weight: bold;
    color: #333;
}

.today-info .desc {
    font-size: 18px;
    color: #444;
}

.time {
    font-size: 12px;
    color: #666;
}

/* 新增：穿衣建议样式 */
.clothing-advice {
    background: rgba(255, 255, 255, 0.95);
    padding: 16px;
    border-radius: 12px;
    margin-bottom: 20px;
}

.advice-title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 12px;
    color: #333;
    text-align: center;
}

.advice-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.advice-row {
    display: flex;
    gap: 12px;
}

.advice-item {
    flex: 1;
    padding: 8px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.7);
}

.advice-item h4 {
    font-size: 12px;
    margin-bottom: 6px;
    color: #555;
}

.tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.tag {
    background: rgba(116, 235, 213, 0.3);
    color: #333;
    padding: 2px 6px;
    border-radius: 12px;
    font-size: 10px;
    white-space: nowrap;
}

.advice-tips {
    padding: 8px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 8px;
}

.advice-tips h4 {
    font-size: 12px;
    margin-bottom: 4px;
    color: #555;
}

.advice-tips p {
    font-size: 11px;
    color: #666;
    line-height: 1.4;
}

/* 天气预报样式更新 */
.weather-forecast {
    background: rgba(255, 255, 255, 0.9);
    padding: 16px;
    border-radius: 12px;
}

.forecast-title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 12px;
    color: #333;
    text-align: center;
}

.forecast-cards {
    display: flex;
    justify-content: space-between;
    gap: 16px;
}

.day {
    flex: 1;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 12px;
    padding: 12px;
    text-align: center;
    transition: all 0.3s;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.day:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.date {
    font-weight: bold;
    margin-bottom: 4px;
    font-size: 12px;
}

.weather {
    font-size: 12px;
    margin: 4px 0;
}

.temp-range {
    font-size: 12px;
    margin: 4px 0;
    font-weight: bold;
}

.wind-info, .humidity {
    font-size: 10px;
    margin: 2px 0;
    color: #666;
}

/* 新增：每日提示样式 */
.daily-tip {
    margin-top: 6px;
}

.tip-tag {
    background: rgba(116, 235, 213, 0.4);
    color: #333;
    padding: 2px 6px;
    border-radius: 8px;
    font-size: 9px;
    font-weight: bold;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .advice-row {
        flex-direction: column;
        gap: 8px;
    }
    
    .forecast-cards {
        flex-direction: column;
        gap: 12px;
    }
    
    .weather-widget {
        padding: 16px;
    }
    
    .title {
        font-size: 20px;
    }
}

/* 迷你版本样式保持不变 */
.mini-weather .weather-widget {
    padding: 12px;
    border-radius: 10px;
    font-size: 13px;
}

.mini-weather .weather-content .title {
    font-size: 16px;
    margin-bottom: 10px;
}

.mini-weather .weather-today {
    padding: 8px;
    gap: 8px;
}

.mini-weather .weather-today .temp {
    font-size: 20px;
}

.mini-weather .weather-today .desc {
    font-size: 13px;
}

.mini-weather .clothing-advice {
    padding: 8px;
    margin-bottom: 10px;
}

.mini-weather .advice-title {
    font-size: 12px;
    margin-bottom: 6px;
}

.mini-weather .advice-item {
    padding: 4px;
}

.mini-weather .advice-item h4 {
    font-size: 10px;
    margin-bottom: 3px;
}

.mini-weather .tag {
    font-size: 8px;
    padding: 1px 4px;
}

.mini-weather .weather-forecast .forecast-cards {
    gap: 8px;
}

.mini-weather .day {
    padding: 6px;
    font-size: 12px;
}

.mini-weather .day .icon-container {
    width: 28px !important;
    height: 28px !important;
}

.mini-weather .date {
    font-size: 10px;
}

.mini-weather .temp-range {
    font-size: 10px;
}

.mini-weather .video-background {
    border-radius: 10px;
}
</style>